<script setup>
import {computed, onMounted, ref, toRefs} from "vue";
import {getNewsContent} from "@/api/news";
import {SUCCESS} from "@/core/constants/HttpStatus";
import {ElMessage} from "element-plus";
import {renderContent} from "@/utils/renderUtil";

const props = defineProps({
  id: Number
});
const {id} = toRefs(props);
console.log('id', id);
const newsData = ref({});
// 新闻图片列表
const imgList = ref([]);
// 展示的图片
const showImgs = computed(()=>{
  return imgList.value.length >= 3 ? imgList.value : [...imgList.value, imgList.value[0]];
})
const getNewsDetail = async () => {
  try {
    const res = await getNewsContent(id.value);
    console.log("新闻详情", res.data);
    const {code, data, msg} = res.data;
    if (code != SUCCESS) {
      throw new Error(msg);
    }
    newsData.value = data;
    imgList.value = data?.imgList.length || [];
    console.log(imgList)
  } catch (e) {
    ElMessage.error(e?.message || "新闻详情获取异常")
  }
}
onMounted(() => {
  getNewsDetail();
})
</script>
<template>
  <div class="whole-news">
    <h1>{{ newsData.title }}</h1>
    <div class="news-detail">
      <div class="news-img">
        <template v-if="imgList.length > 1">
          <el-carousel :interval="3000" type="card" height="200px">
            <el-carousel-item v-for="(item, idx) in showImgs" :key="idx">
              <el-image :src="require(item)" />
            </el-carousel-item>
          </el-carousel>
        </template>
        <template v-else-if="imgList.length === 1">
          <el-image :src="require(imgList[0])" />
        </template>
        <template v-else>
          <img src="@/assets/images/home_school.png"/>
        </template>

      </div>
      <div class="news-detail-body">
        <p class="news-text" v-html="renderContent(newsData.content)"></p>
      </div>
      <p class="news-text release-time" >{{ newsData.releaseTime }}</p>
    </div>
  </div>
</template>

<style scoped lang="less">
.whole-news {
  width: 1400px;
  margin: 50px auto;
}

h1 {
  text-align: center;
  border-bottom: 2px solid #549aae;
  padding-bottom: 20px;
}

.news-detail {
  margin-top: 20px;
  padding: 0 40px 100px;

  .news-detail-body {
    min-height: 60vh;
  }

  .news-text {
    margin-bottom: 10px;
    font-size: 18px;
    //text-indent: 2em;
    line-height: 2;
  }

  .release-time {
    float: right;
    text-align: right;
    font-size: 20px;
  }

  .news-img {
    height: 200px;
    float: right;
    width: 40%;
    img {
      float: right;
      margin-right: 50px;
      height: 100%;
    }
    .el-carousel {
      width: 100%;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
</style>
